﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>生成的爱心</title>

<style>
html, body { 
  width: 100%;
  height: 100%; 
  background: #3d2152; 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}</style>

</head>
<body>

<script src="js/css-doodle.min.js"></script>
<css-doodle grid="5">
  :doodle {
    @grid: 10 / 100%; 
  }
  background: @pick(
    #ff0198, #8156a8, #ff6d00, #ff75e4
  );

  transform: translate(
    @rand(-50vw, 50vw),
    @rand(-50vh, 50vh)
  );

  @size: 3.5vmin;
  @shape: heart;
  @place-cell: 50% 50%;

  animation-name: explosion;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-duration: calc(@rand(2s, 5s, .1));
  animation-delay: calc(@rand(-5s, -1s, .1));
  animation-timing-function: 
    cubic-bezier(.84, .02, 1, 1);

  @keyframes explosion {
    0% { opacity: 0; }
    70% { opacity: 1; }
    100% { transform: translate(0, 0); }
  }
</css-doodle>

</body>
</html>
